/* 18. Gallery Page  ------------------------------------------*/
.gallery-grid {
    .item {
        margin: 0 -10px;
        margin-bottom: 10px;
        figure {
            position: relative;
        }
    }
}

.gallery-page-content {
    padding: 0 5px;
    .item {
        margin: 0 -5px;
        margin-bottom: 20px;
    }
}

.gallery-page {
    margin-bottom: -20px;
}

.grid-sizer,
.gallery-item {
    width: 33.333%;
}

.gallery-item {
    float: left;
}

.gallery-mansory-content {
    counter-reset: gallery-item;
}
.gallery-hover {
    figure {
        position: relative;
        a {
            height: 100%;
            &:after {
                position: absolute;
                font-family: "FontAwesome";
                content: '\f0b2';
                left: 50%;
                top: 50%;
                font-size: 18px;
                @include transform(translate(-50%,
                -50%));
                color: #fff;
                width: 55px;
                height: 55px;
                @include border-radius(50%);
                opacity: 0;
                z-index: 99;
                @include transition(all 0.5s);
                background: $yellow-primary;
                cursor: pointer;
                @extend display-flex;
                @include justify-content(center);
                @include align-items(center);
            }
            &:before {
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                content: "";
                background: rgba(0, 0, 0, 0.8);
                filter: alpha(opacity=0);
                -ms-filter: "alpha(opacity=0)";
                -webkit-opacity: 0;
                -khtml-opacity: 0;
                -moz-opacity: 0;
                -ms-opacity: 0;
                -o-opacity: 0;
                opacity: 0;
                @include transform(rotateY(0));
                @include transition(all .4s ease-in-out);
                z-index: 9;
            }
        }
        &:hover {
            a {
                &:before {
                    filter: alpha(opacity=100);
                    -ms-filter: "alpha(opacity=100)";
                    -webkit-opacity: 1;
                    -khtml-opacity: 1;
                    -moz-opacity: 1;
                    -ms-opacity: 1;
                    -o-opacity: 1;
                    opacity: 1;
                    -ms-transform: rotateY(180deg);
                    -webkit-transform: rotateY(180deg);
                    transform: rotateY(180deg);
                }
                &:after {
                    opacity: 1;
                }
            }
        }
    }
}